<template>
  <el-container>
    <el-header>
      <div class="sorts-container">
        <h1>商品筛选</h1>
        <div
          v-for="sort in sorts"
          :key="sort.id"
          class="sort-item"
          @click="queryBrands(sort.id)"
        >{{ sort.sortName }}</div>
      </div>
    </el-header>

    <el-main>
      <el-card>
        <div slot="header" class="clearfix">
          <div class="brand-filter">
            热门品牌:
            <el-button
              v-for="brand in brands"
              :key="brand.id"
              @click="querySpus(selectedSortId,brand.id)"
            >{{ brand.brandName }}</el-button>
          </div>
        </div>

        <div class="filter-options">
          <el-row :gutter="20">
            <el-col :span="6">
              <div style="width: 800px;">
                <span>价格区间:</span>
                <el-radio-group v-model="filters.price">
                  <el-radio-button label="全部"></el-radio-button>
                  <el-radio-button label="300以下"></el-radio-button>
                  <el-radio-button label="300-699"></el-radio-button>
                  <el-radio-button label="700-999"></el-radio-button>
                  <el-radio-button label="1000-1999"></el-radio-button>
                  <el-radio-button label="2000-2999"></el-radio-button>
                  <el-radio-button label="3000以上"></el-radio-button>
                </el-radio-group>
              </div>
            </el-col>
            <!-- 其他的 el-col 组件 -->
          </el-row>
        </div>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix">

        </div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="product in filteredProducts" :key="product.id">
            <el-card :body-style="{ padding: '20px' }">
              <div style="padding: 14px;">
                <span>{{ product.spuName }}</span>
                <div class="bottom clearfix">
                  <span class="price">￥{{ product.price }}</span>
                  <el-button type="primary" size="mini" @click="queryDetail(product.id)">查看详情</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </el-main>
  </el-container>
</template>
  
  <script>
export default {
  data() {
    return {
      sorts: [],
      brands: [],
      selectedSortId: null,
      filters: {
        price: "全部",
      },
      products: []
    };
  },
  methods: {
    querySorts() {
      this.$axios.get("/api/zgyd-product/querySorts").then(res => {
        if (res.data.code === 200) {
          this.sorts = res.data.data;
        }
      });
    },
    queryBrands(sortId) {
      this.selectedSortId = sortId;
      let param = new URLSearchParams();
      param.append("sortId", sortId);
      this.$axios.post("/api/zgyd-product/queryBrands", param).then(res => {
        if (res.data.code === 200) {
          this.brands = res.data.data;
        }
      });
    },
    querySpus(sortId, brandId) {
      let param = new URLSearchParams();
      param.append("sortId", sortId);
      param.append("brandId", brandId);
      this.$axios.post("/api/zgyd-product/querySpus", param).then(res => {
        if (res.data.code === 200) {
          this.products = res.data.data;
        }
      });
    },
    buyProduct(product) {
      console.log("Add to cart:", product);
    },
    queryDetail(val) {
      this.$router.push({ path: "/productDetail", query: { "spuId": val } });
    }
  },
  computed: {
    filteredProducts() {
      // 根据 filters 进行筛选并返回筛选后的商品列表
      return this.products.filter(product => {
        // 根据价格筛选
        const priceMatch =
          this.filters.price === "全部" ||
          (this.filters.price < "300以下" &&
            product.price >= 0 &&
            product.price <= 299) ||
          (this.filters.price === "300-699" &&
            product.price >= 300 &&
            product.price <= 699) ||
          (this.filters.price === "700-999" &&
            product.price >= 700 &&
            product.price <= 999) ||
          (this.filters.price === "1000-1999" &&
            product.price >= 1000 &&
            product.price <= 1999) ||
          (this.filters.price === "2000-2999" &&
            product.price >= 2000 &&
            product.price <= 2999) ||
          (this.filters.price === "3000以上" && product.price >= 3000);

        // 根据其他条件筛选（略）
        return priceMatch;
      });
    }
  },
  created() {
    this.querySorts();
  }
};
</script>
  
<style>
.header h1 {
  font-size: 24px;
  font-weight: bold;
}
.brand-filter {
  margin: 20px 0;
}
.brand-filter .el-button {
  margin: 5px;
}
.filter-options {
  margin: 20px 0;
}
.image {
  width: 100%;
  height: auto;
}
.price {
  font-size: 18px;
  color: #ff4949;
}
.bottom {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sorts-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.sort-item {
  margin-left: 10px;
}

.el-container {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
  background: #f6f6f6;
}

.el-header, .el-main {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 20px;
}

.sorts-container h1 {
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}

.sort-item {
  background: #f5f5f5;
  padding: 6px 20px;
  margin-right: 10px;
  border-radius: 15px;
  cursor: pointer;
}

.brand-filter {
  margin-top: 20px;
}

.el-row {
  margin-bottom: 20px !important;
}

.el-card {
  border: none;
  box-shadow: none;
}

.bottom .el-button {
  padding: 5px 20px;
}

.product-item h3 {
  margin-bottom: 10px;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.product-item .price {
  color: #e93b3d;
  font-size: 20px;
  font-weight: 700;
}

.bottom {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>
  